<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>订单查询</span>
      <div>
        <!-- <el-button type="primary" disabled>同步银行订单</el-button> -->
        <!-- <el-button type="primary" :disabled="exxxx" @click="joinexportlist()"
          >导出任务列表</el-button
        > -->
        <el-button
          type="primary"
          :disabled="exxxx"
          @click="merchantexcel()"
          ><i class="el-icon-download"></i>订单导出</el-button>
         <el-button icon="el-icon-refresh"></el-button>
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
          <div
            class="leftitem"
            v-if="
              userinfo.rolesId != 5 &&
              userinfo.rolesId != 6 &&
              userinfo.rolesId != 4
            "
          >
            <el-form ref="conditions" :model="conditions">
              <el-autocomplete
                v-if="
                  userinfo.rolesId == 1 ||
                  userinfo.rolesId == 8 ||
                  userinfo.rolesId == 9
                "
                class="service"
                v-model.trim="conditions.agent1"
                :fetch-suggestions="querySearch"
                placeholder="请选择一级服务商"
                @select="serviceid"
              ></el-autocomplete>
              <el-autocomplete
                v-if="
                  userinfo.rolesId == 1 ||
                  userinfo.rolesId == 8 ||
                  userinfo.rolesId == 2 ||
                  userinfo.rolesId == 9
                "
                class="service"
                v-model.trim="conditions.agent2"
                :fetch-suggestions="querySearch2"
                placeholder="请选择二级服务商"
                @select="serviceid2"
              ></el-autocomplete>
              <el-autocomplete
                v-if="
                  userinfo.rolesId != 4 &&
                  userinfo.rolesId != 5 &&
                  userinfo.rolesId != 6
                "
                class="service"
                v-model.trim="conditions.BDname"
                :fetch-suggestions="BDname"
                placeholder="业务经理"
                @select="BDid"
              ></el-autocomplete>
            </el-form>
          </div>
          <div class="leftitem">
            <el-form ref="conditions" :model="conditions" label-width="80px">
              <el-select
                class="width20"
                v-model="conditions.payStatusCode"
                placeholder="支付状态"
                @change="payStatusfun(conditions.payStatusCode)"
              >
                <el-option
                  v-for="(item, index) in payStatusCodearr"
                  :key="index"
                  :label="item.value"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select
                class="width20"
                v-model="conditions.type"
                placeholder="订单类型"
              >
                <el-option keys="1" label="全部" value=""></el-option>
                <el-option keys="1" label="支付宝" value="300"></el-option>
                <el-option keys="1" label="微信" value="400"></el-option>
                <el-option keys="1" label="银行卡" value="200"></el-option>
                <el-option keys="1" label="云闪付" value="600"></el-option>
                <el-option keys="1" label="翼支付" value="700"></el-option>
                <el-option keys="1" label="数字人民币" value="800"></el-option>
                <el-option keys="1" label="龙支付" value="900"></el-option>
              </el-select>
              <el-input
                class="merchants width60"
                v-model.trim="conditions.outTradeNo"
                placeholder="订单号"
              ></el-input>
            </el-form>
          </div>
          <div class="leftitem">
            <el-form label-width="80px">
              <el-select
                class="width20"
                v-model="conditions.payMode"
                placeholder="支付方式"
              >
                <el-option
                  v-for="(item, index) in paymodearr"
                  :key="index"
                  :label="item.value"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-input
                type="number"
                class="merchants width30"
                v-model.trim="conditions.totalFeenum"
                placeholder="交易金额"
                @input="totalFeenum()"
              ></el-input
              ><span class="yuan">元</span>
              <el-input
                class="merchants width60"
                style="margin-left: -12px"
                v-model.trim="conditions.payTraceNo"
                placeholder="流水号"
              ></el-input>
            </el-form>
          </div>
          <div class="leftitem">
            <el-date-picker
              v-model="date"
              type="datetimerange"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :clearable="false"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
            <el-input
              class="merchants"
              style="width: 35%"
              v-model.trim="conditions.channelTradeNo"
              placeholder="官方订单号"
            ></el-input>
          </div>
        </div>
        <div class="rightBox">
          <div
            class="rightitem"
            v-if="userinfo.rolesId != 5 && userinfo.rolesId != 6"
          >
            <el-form ref="conditions" :model="conditions" label-width="80px">
              <el-input
                class="width60"
                v-model.trim="conditions.merchantNo"
                placeholder="商户号"
              ></el-input>
              <el-autocomplete
                class="width60"
                v-model.trim="conditions.merchantName"
                :fetch-suggestions="merchantslist"
                :debounce="300"
                placeholder="商户名"
                @select="okmerchants"
              ></el-autocomplete>
            </el-form>
          </div>
          <div class="rightitem" v-if="userinfo.rolesId != 6">
            <el-form ref="conditions" :model="conditions" label-width="80px">
              <el-input
                class="width60"
                v-model.trim="conditions.shopCode"
                placeholder="门店号"
              ></el-input>
              <el-autocomplete
                class="width60"
                v-if="conditions.merchantId"
                v-model.trim="conditions.shopName"
                :fetch-suggestions="shoplist"
                placeholder="门店名"
                @select="okshop"
              ></el-autocomplete>
            </el-form>
          </div>
          <div class="rightitem">
            <div class="block">
              <el-form label-width="80px">
                <el-input
                  class="merchants"
                  v-model.trim="conditions.terminalNo"
                  placeholder="终端号"
                ></el-input>
                <el-select
                  v-if="userinfo.rolesId != 5 && userinfo.rolesId != 6"
                  class="width30"
                  v-model="conditions.channelType"
                  placeholder="通道类型"
                >
                  <el-option keys="1" label="全部" value=""></el-option>
                  <el-option
                    v-for="(item, index) in channelslist"
                    :key="index"
                    :label="item.options"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form>
            </div>
          </div>
          <div class="rightitem">
            <div class="block">
              <el-form label-width="80px">
                <el-select
                  class="width30"
                  v-model="conditions.templateId"
                  placeholder="模板类型"
                >
                  <el-option keys="1" label="全部" value=""></el-option>
                  <el-option
                    v-for="(item, index) in templateList"
                    :key="item.id"
                    :label="item.formName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form>
            </div>
          </div>
          <div class="rightitem">
            <el-button
              :disabled="sosobtn"
              icon="el-icon-search"
              type="primary"
              @click="soso"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" type="primary" @click="reset"
              >重置</el-button
            >
          </div>
        </div>
      </div>
      <div class="stitle">合计:</div>
      <div class="statistical">
        <!-- <div class="statisticalitem">
          <div>总交易金额</div>
          <div>
            <span class="red">{{ indentinfo.totalFee }}</span> 元
          </div>
        </div> -->
        <div class="statisticalitem">
          <div>总实收金额</div>
          <div>
            <span class="red">{{ indentinfo.balance}}</span> 元
          </div>
        </div>
        <div class="statisticalitem">
          <div>总手续费</div>
          <div>
            <span class="red">{{ indentinfo.fee }}</span> 元
          </div>
        </div>
        <div class="statisticalitem">
          <div>总结算金额</div>
          <div>
            <span class="red">{{ indentinfo.reportFee }}</span> 元
          </div>
        </div>
        <div class="statisticalitem">
          <div>总交易笔数</div>
          <div>
            <span class="red">{{ indentinfo.total }}</span> 笔
          </div>
        </div>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
          ></el-table-column>
          <el-table-column
            align="center"
            width="120"
            label="模板名称"
            prop="templateName"
          ></el-table-column>
          <el-table-column
            v-if="userinfo.mid == 18653 || userinfo.mid == 19103"
            prop="orderBody"
            align="center"
            label="姓名"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.orderBody.split('-')[0] }}</div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="userinfo.mid == 18653 || userinfo.mid == 19103"
            prop="orderBody"
            align="center"
            label="手机号"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.orderBody.split('-')[1] }}</div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="userinfo.mid == 18653 || userinfo.mid == 19103"
            prop="orderBody"
            align="center"
            label="身份证"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.orderBody.split('-')[2] }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="交易时间?订单号"
            align="center"
            width="240"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.settleTime }}</div>
              <div>{{ scope.row.outTradeNo }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="订单金额(元)?支付状态"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.totalFee }}</div>
              <div>
                <span
                  v-if="scope.row.payStatusCode == 1"
                  class="green"
                  :class="[scope.row.refundStatus == '01' ? 'blue' : '']"
                  >{{ scope.row.payStatusCodeName }}</span
                >
                <span
                  v-else-if="
                    scope.row.payStatusCode == 2 ||
                    scope.row.payStatusCode == 6 ||
                    scope.row.payStatusCode == 4
                  "
                  class="hui"
                  >{{ scope.row.payStatusCodeName }}</span
                >
                <span v-else-if="scope.row.payStatusCode == 3" class="orange">{{
                  scope.row.payStatusCodeName
                }}</span>
                <span v-else-if="scope.row.payStatusCode == 5" class="reds">{{
                  scope.row.payStatusCodeName
                }}</span>
                <span
                  v-else-if="
                    scope.row.payStatusCode == 8 ||
                    scope.row.payStatusCode == 13 ||
                    scope.row.payStatusCode == 8
                  "
                  class="orange"
                  >{{ scope.row.payStatusCodeName }}</span
                >
                <span
                  v-else-if="
                    scope.row.payStatusCode == 11 && scope.row.refundStatus == 3
                  "
                  class="cyan"
                  >{{ scope.row.payStatusCodeName }}</span
                >
                <span
                  v-else-if="
                    scope.row.payStatusCode == 11 && scope.row.refundStatus == 4
                  "
                  class="yellow"
                  >{{ scope.row.payStatusCodeName }}</span
                >
                <span
                  v-else-if="
                    scope.row.payStatusCode == 11 &&
                    scope.row.refundStatus == ''
                  "
                  class="green"
                  >{{ scope.row.payStatusCodeName }}</span
                >
                <span v-else-if="scope.row.payStatusCode == 15" class="reds">{{
                  scope.row.payStatusCodeName
                }}</span>
                <span v-else class="blue">{{
                  scope.row.payStatusCodeName
                }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="实收金额?优惠金额"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.balance }}</div>
              <div>
                {{
                  conditions.payStatusCode == 6 || conditions.payStatusCode == 2
                    ? "0.00"
                    : (scope.row.totalFee - scope.row.balance).toFixed(2)
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="typeName"
            align="center"
            label="订单类型"
          ></el-table-column>
          <el-table-column
            prop="name"
            v-if="userinfo.rolesId == 5 || userinfo.rolesId == 6"
            label="手续费"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div v-if="userinfo.rolesId != 5 && userinfo.rolesId != 6">
                {{ scope.row.channelTypeName }}
              </div>
              <div>{{ scope.row.fee }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            v-else
            label="通道名称?手续费"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div v-if="userinfo.rolesId != 5 && userinfo.rolesId != 6">
                {{ scope.row.channelTypeName }}
              </div>
              <div>{{ scope.row.fee }}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="address" label="费率(万分比)?手续费(元)" :render-header="renderheader">
            <template slot-scope="scope">
              <div>微信-{{scope.row.wxChannelName}}</div>
              <div>支付宝-{{scope.row.aliChannelName}}</div>
            </template>
          </el-table-column> -->
          <el-table-column
            prop="payModeName"
            align="center"
            label="支付方式"
          ></el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="商户号?商户名"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.merchantNo }}</div>
              <div>{{ scope.row.merchantName }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="门店号?门店名"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.shopCode }}</div>
              <div>{{ scope.row.shopName }}</div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="
                  joinindentdetails(scope.row.id, scope.row.payStatusCode)
                "
                >详情</el-button
              >

              
              <!-- <div v-if="scope.row.payStatusCode == 1">
                <el-button
                  type="text"
                  size="small"
                  v-if="refundBtnFlag"
                  @click="refund(scope.row.totalFee, scope.row.id)"
                  >退款</el-button
                >
              </div> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-size="10"
            :current-page.sync="cur_page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="combined"
          ></el-pagination>
        </div>
      </div>
      <br />
      <br />
      <!-- 退款 -->
      <el-dialog
        v-dialogDrag
        title="退款"
        :visible.sync="visible"
        width="45%"
        :close-on-click-modal="false"
      >
        <el-form
          :model="password"
          status-icon
          ref="password"
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item :required="true" label="退款金额">
            <el-input
              type="text"
              v-model.trim="password.money"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item :required="true" label="服务密码">
            <el-input
              type="password"
              v-model.trim="password.psd"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <!-- @click="visible = false" -->
          <el-button type="primary" @click="refundok()">确定</el-button>
        </span>
      </el-dialog>
      <!-- 补录订单 -->
      <el-dialog
        title="补录订单"
        center
        :visible.sync="orderVisible"
        @closed="orderReset"
        width="45%"
        :close-on-click-modal="false"
      >
        <el-divider></el-divider>
        <div style="font-size: 18px; color: #3a3a3a; margin-bottom: 15px">
          订单信息
        </div>
        <el-form
          :model="orderForm"
          ref="orderForm"
          :rules="orderFormRules"
          inline
          :label-position="labelPosition"
        >
          <el-form-item
            label="商户号"
            :label-width="formLabelWidth"
            prop="mch_no"
            class="elForm"
          >
            <el-input
              v-model="orderForm.mch_no"
              autocomplete="off"
              placeholder="请填写商户号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="流水号"
            :label-width="formLabelWidth"
            prop="pay_trace_no"
            class="elForm"
          >
            <el-input
              v-model="orderForm.pay_trace_no"
              autocomplete="off"
              placeholder="请填写流水号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="门店号"
            :label-width="formLabelWidth"
            prop="shop_no"
            class="elForm"
          >
            <el-input
              v-model="orderForm.shop_no"
              autocomplete="off"
              placeholder="请填写门店号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="渠道订单号"
            :label-width="formLabelWidth"
            prop="channel_order_no"
            class="elForm"
          >
            <el-input
              v-model="orderForm.channel_order_no"
              autocomplete="off"
              placeholder="请填写渠道订单号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="终端号"
            :label-width="formLabelWidth"
            prop="terminal_no"
            class="elForm"
          >
            <el-input
              v-model="orderForm.terminal_no"
              autocomplete="off"
              placeholder="请填写终端号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="官方订单号"
            :label-width="formLabelWidth"
            prop="channel_trade_no"
            class="elForm"
          >
            <el-input
              v-model="orderForm.channel_trade_no"
              autocomplete="off"
              placeholder="请填写官方订单号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="机构号"
            :label-width="formLabelWidth"
            prop="inst_no"
            class="elForm"
          >
            <el-input
              v-model="orderForm.inst_no"
              autocomplete="off"
              placeholder="请填写机构号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="交易单号"
            :label-width="formLabelWidth"
            prop="out_trade_no"
            class="elForm"
          >
            <el-input
              v-model="orderForm.out_trade_no"
              autocomplete="off"
              placeholder="请填写交易订单号"
            ></el-input>
          </el-form-item>
          <el-divider class="diver2th"></el-divider>
          <div style="font-size: 18px; color: #3a3a3a; margin-bottom: 20px">
            支付信息
          </div>
          <div>
            <el-form-item
              label="订单创建时间"
              prop="pay_time"
              style="margin-left: 24px"
              class="dateTime"
            >
              <el-date-picker
                type="datetime"
                placeholder="请选择日期与时间"
                v-model="orderForm.pay_time"
                style="width: 100%"
                value-format="yyyyMMddHHmmss"
              ></el-date-picker>
            </el-form-item>
          </div>
          <el-form-item
            label="通道类型"
            :label-width="formLabelWidth"
            prop="channel_type"
            class="elForm"
          >
            <el-select
              v-model="orderForm.channel_type"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in payChannelList"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="支付状态"
            :label-width="formLabelWidth"
            prop="pay_status_code"
            class="elForm"
          >
            <el-select
              v-model="orderForm.pay_status_code"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in payStatusCodearr"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="支付方式"
            :label-width="formLabelWidth"
            prop="pay_mode"
            class="elForm"
          >
            <el-select
              v-model="orderForm.pay_mode"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in payType"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="交易金额"
            :label-width="formLabelWidth"
            prop="total_fee"
            class="elForm"
          >
            <el-input
              v-model="orderForm.total_fee"
              autocomplete="off"
              placeholder="请填写交易金额"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="支付类型"
            :label-width="formLabelWidth"
            prop="type"
            class="elForm"
          >
            <el-select
              v-model="orderForm.type"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in payType"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="orderReset"
            style="margin-right: 40px"
            size="medium"
            >取 消</el-button
          >
          <el-button type="primary" @click="subOrder" size="medium"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  templateOrderList,
  templateStatistics,
  additionalOrder,
  getservice,
  getBD,
  orderpage,
  getOrderDetail,
  refundorder,
  queryorder,
  getUserSelect,
  merchantlist,
  shop,
  temPexportExcels,
  dictionarylist,
  templateList
} from "@/api/api";
import md5 from "js-md5";
export default {
  name: "item-one",
  data: function () {
    return {
      templateList:[],
      orderVisible: false,
      orderForm: {},
      formLabelWidth: "85px",
      labelPosition: "left",
      myrolesId: "", //权限
      refundBtnFlag: false, // 退款按钮控制
      tableData: [],
      cur_page: 1,
      cur_size: 10,
      multipleSelection: [],
      visible: false,
      loading: true,
      exxxx: false,
      sosobtn: false,
      servicearr1: [],
      servicearr2: [],
      BDarr: [],
      merchantarr: [],
      merchantarrlist: [],
      restaurants: [],
      combined: 10,
      pageCount: "",
      merchantsinfo: "",
      shopname: "",
      shopid: "",
      date: "",
      userinfo: "",
      statistic: "123",
      indentinfo: {},
      newobj: {},
      shoplists: [],
      merchantslists: [],
      channelslist: [],
      password: {
        psd: "",
        money: "",
      },
      paymodearr: [
        { value: "全部", id: "" },
        { value: "扫码支付", id: 1 },
        { value: "二维码支付", id: 2 },
        { value: "公众号支付", id: 3 },
        { value: "wap支付", id: 4 },
        { value: "app支付", id: 5 },
        { value: "小程序支付", id: 6 },
        { value: "预授权", id: 7 },
      ],
      conditions: {
        totalFeenum: "",
        payStatusCode: "",
        BDname: "",
        bdId: "",
        merchantId: "",
      },
      payStatusCodearr: [
        { value: "全部", id: "" },
        { value: "支付成功", id: 1 },
        { value: "支付失败", id: 2 },
        { value: "支付中", id: 3 },
        { value: "已撤销", id: 4 },
        { value: "退款成功", id: 5 },
        { value: "退款失败", id: 6 },
        { value: "冲正", id: 7 },
        { value: "退款中", id: 8 },
        { value: "预授权成功", id: 11 },
        { value: "预授权资金冻结失败", id: 12 },
        { value: "预授权中", id: 13 },
        // {value:'预授权撤销',id:14},
        { value: "预授权解冻", id: 15 },
      ],
      payChannelList: [
        { value: "网商", id: 1 },
        { value: "富友", id: 2 },
        { value: "兴业", id: 3 },
        { value: "银联", id: 4 },
        { value: "付费通", id: 5 },
        { value: "官方直连", id: 6 },
      ],
      payType: [
        { value: "现金", id: 100 },
        { value: "银行卡刷卡", id: 200 },
        { value: "支付宝", id: 300 },
        { value: "微信", id: 400 },
        { value: "口碑", id: 500 },
      ],
      orderFormRules: {
        mch_no: [{ required: true, message: "请填写商户号", trigger: "blur" }],
        pay_trace_no: [
          { required: true, message: "请填写流水号", trigger: "blur" },
        ],
        pay_time: [
          { required: true, message: "请选择日期与时间", trigger: "blur" },
        ],
        channel_type: [
          { required: true, message: "请选择通道类型", trigger: "change" },
        ],
        pay_status_code: [
          { required: true, message: "请选择支付状态", trigger: "change" },
        ],
        pay_mode: [
          { required: true, message: "请选择支付方式", trigger: "change" },
        ],
        total_fee: [
          { required: true, message: "请输入交易金额", trigger: "change" },
        ],
        type: [
          { required: true, message: "请选择支付类型", trigger: "change" },
        ],
        inst_no: [
          { required: true, message: "请填写机构号", trigger: "change" },
        ],
        out_trade_no: [
          { required: true, message: "请填写交易订单号", trigger: "change" },
        ],
      },
      pickerOptions: {
        // 设置不能超过未来时间
        // disabledDate: (time) => {
        //   // 设置可选择的日期为今天之后的一个月内
        //   const curDate = (new Date()).getTime()
        //   // 这里算出一个月的毫秒数,这里使用30的平均值,实际中应根据具体的每个月有多少天计算
        //   const day = 31 * 24 * 3600 * 1000
        //   const dateRegion = curDate - day
        //   return time.getTime() > Date.now() - 8.64e7 ||
        //   time.getTime() < dateRegion
        // }
        // 设置不能超过当天的23:59:59
        disabledDate(time) {
          let nowDate = new Date();
          let date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            date: nowDate.getDate(),
          };
          let timeDate =
            date.year + "-" + date.month + "-" + date.date + " 23:59:59";
          let times = new Date(timeDate).getTime();
          return time.getTime() > times;
        },
      },
    };
  },
  created() {
    this.initTemplateList()
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.$store.dispatch("getNewNum", 6);
    // console.log(this.$store.state.changableNum);
    // console.log(this.$store.state.showFooter);
    // console.log(this.$store.state.logininfo);
    const start = new Date();
    start.setTime(start.getTime());
    const year = start.getFullYear();
    let month = start.getMonth() + 1;
    if (month < 10) {
      month = "0" + month;
    }
    let date = start.getDate();
    if (date < 10) {
      date = "0" + date;
    }
    const date1 = year + "-" + month + "-" + date + " 00:00:00";
    const date2 = year + "-" + month + "-" + date + " 23:59:59";
    this.date = [date1, date2];
    this.getPermissions();
    this.orderpage("1");
    // this.getservice('1')
    this.dictionarylist();
    // 根据角色区别模糊搜索内容
    if (this.userinfo.rolesId == 2 || this.userinfo.rolesId == 3) {
      getservice({
        type: 2,
        parentid: this.userinfo.fid,
      }).then((res) => {
        // console.log(res);
        for (var i = 0; i < res.data.rows.length; i++) {
          this.servicearr2.push({
            value: res.data.rows[i].agentname,
            id: res.data.rows[i].id,
          });
        }
      });
      this.getBD(this.userinfo.fid);
    } else if (this.userinfo.rolesId == 5) {
      this.conditions.merchantId = this.userinfo.fid;
    }
  },
  methods: {
   async initTemplateList(){
      const res = await templateList({size:999,page:1})
      this.templateList = res.data
    },
    // 补录订单
    collectionOrder() {
      this.orderVisible = true;
    },
    // 补单页面关闭清空内容
    orderReset() {
      this.$refs.orderForm.resetFields();
      this.orderVisible = false;
    },
    // 提交补单
    subOrder() {
      let obj = {
        sign: "",
        ...this.orderForm,
      };
      // let obj = {
      //   inst_no: "60000001",
      //   mch_no: "852112240046",
      //   shop_no: "",
      //   terminal_no: "70019268",
      //   type: "400",
      //   pay_mode: "1",
      //   channel_type: "11",
      //   out_trade_no: "200016043B4122042415162920863",
      //   pay_trace_no: "53aa08b9-a6f9-5b48-be8c-65c49e59a70a",
      //   pay_time: "20220414150108",
      //   total_fee: "1000",
      //   pay_status_code: "1",
      //   channel_trade_no: "",
      //   channel_order_no: "002222042415162941553708",
      //   sign: ""
      // }
      this.$refs.orderForm.validate(async (valid) => {
        if (!valid) return this.$message.error("请检查输入内容");
        const res = await additionalOrder(obj);
        if (res.code === 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          if (res.code === 200) {
            this.$message.success("提交补单成功！");
            this.$refs.orderForm.resetFields();
            this.orderVisible = false;
            this.orderpage("1");
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
    // 获取所有通道type
    dictionarylist() {
      dictionarylist({ type: "channelType", status: 0,sort: "sorted", order:"DESC" }).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.channelslist = res.data;
          console.log(this.channelslist);
        }
      });
    },
    //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
      }
    },
    // 刷新
    refresh() {
      this.$router.go({
        path: 0,
        query: {
          t: Date.now()
        }
      })
    },
    // 获取商户列表初始化
    merchantslist(queryString, cb) {
      let sosolist = {};
      sosolist = {
        page: 1,
        size: 20,
        bdId: this.conditions.bdId,
        agent1Id: this.conditions.agent1Id,
        agent2Id: this.conditions.agent2Id,
        merchantName: this.conditions.merchantName,
      };
      merchantlist(sosolist).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.merchantarrlist = [];
          for (var i = 0; i < res.data.length; i++) {
            this.merchantarrlist.push({
              value: res.data[i].merchantName,
              id: res.data[i].id,
            });
          }
          let results = queryString
            ? this.merchantarrlist.filter(this.createFilter(queryString))
            : this.merchantarrlist;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    // 选择商户
    okmerchants(val) {
      console.log(val);
      this.conditions.merchantId = val.id;
    },
    // 获取门店列表初始化
    shoplist(queryString, cb) {
      shop({
        page: 1,
        size: 20,
        merchantId: this.conditions.merchantId,
        keywords: this.conditions.shopName,
      }).then((res) => {
        console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.shoplists = [];
          for (var i = 0; i < res.data.length; i++) {
            this.shoplists.push({
              value: res.data[i].shopName,
              id: res.data[i].id,
            });
          }
          let results = queryString
            ? this.shoplists.filter(this.createFilter(queryString))
            : this.shoplists;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    // 选择门店
    okshop(val) {
      // console.log(val)
      this.conditions.shopId = val.id;
      this.conditions.shopName = val.value;
    },
    //监听交易金额
    totalFeenum() {
      // console.log(this.conditions.totalFeenum)
      if (!this.conditions.totalFeenum) {
        this.conditions.totalFee = "";
      } else {
        this.conditions.totalFee = (
          this.conditions.totalFeenum * 100
        ).toFixed();
      }
    },
    //获取权限
    getPermissions() {
      let userInfoSessionStr = sessionStorage.getItem("userInfo");
      let userInfoSession = JSON.parse(userInfoSessionStr);
      this.myrolesId = userInfoSession.rolesId;
      if (
        this.myrolesId == 1 ||
        this.myrolesId == 2 ||
        this.myrolesId == 8 ||
        this.myrolesId == 5 ||
        this.myrolesId == 6
      ) {
        this.refundBtnFlag = true;
      } else if (this.myrolesId == 3) {
        if (userInfoSession.fid == 1309 || userInfoSession.fid == 889) {
          this.refundBtnFlag = true;
        } else {
          this.refundBtnFlag = false;
        }
      } else {
        this.refundBtnFlag = false;
      }
    },
    // 业务经理
    BDname(queryString, cb) {
      let BDarr = this.BDarr;
      let results = queryString
        ? BDarr.filter(this.createFilter(queryString))
        : BDarr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    BDid(item) {
      //  console.log(item)
      this.conditions.bdId = item.id;
    },
    // 根据一级查2级
    serviceid(item) {
      this.servicearr2 = [];
      // this.ruleForm.agent2 = '';
      // this.ruleForm.BDname = '';
      getservice({
        type: 2,
        parentid: item.id,
      }).then((res) => {
        console.log(res);
        for (var i = 0; i < res.data.rows.length; i++) {
          this.servicearr2.push({
            value: res.data.rows[i].agentname,
            id: res.data.rows[i].id,
          });
        }
      });
      this.conditions.agent1Id = item.id;
    },
    // 获取2级
    serviceid2(item) {
      this.conditions.agent2Id = item.id;
      this.conditions.BDname = "";
      console.log(item);
      this.getBD(item.id);
    },
    getBD(id) {
      this.BDarr = [];
      getBD({ agentid: id }).then((res) => {
        console.log(res);
        for (var i = 0; i < res.data.rows.length; i++) {
          this.BDarr.push({
            value: res.data.rows[i].name,
            id: res.data.rows[i].id,
          });
        }
      });
    },
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("?")[0]),
        h("br"),
        h("span", {}, column.label.split("?")[1]),
      ]);
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.orderpage("1");
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    sizechange(val) {
      this.cur_size = val;
      this.orderpage("1");
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    //多选框
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    //  重置
    reset() {
      const start = new Date();
      start.setTime(start.getTime());
      const year = start.getFullYear();
      let month = start.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      let date = start.getDate();
      if (date < 10) {
        date = "0" + date;
      }
      const date1 = year + "-" + month + "-" + date + " 00:00:00";
      const date2 = year + "-" + month + "-" + date + " 23:59:59";
      this.date = [date1, date2];
      this.statistic = "123";
      this.conditions = {
        BDname: "",
        bdId: "",
        merchantId: "",
        payStatusCode: "",
      };
      this.cur_page = 1;
      if (this.userinfo.rolesId == 1 || this.userinfo.rolesId == 8) {
        this.servicearr2 = [];
        this.BDarr = [];
        this.merchantarrlist = [];
      } else if (this.userinfo.rolesId == 2) {
        this.BDarr = [];
        this.merchantarrlist = [];
      } else if (this.userinfo.rolesId == 5) {
        this.conditions.merchantId = this.userinfo.fid;
      }
    },
    // 搜索
    soso() {
      if(this.date == null || this.date.length == 0 || this.date == undefined) {
        this.$message.error('查询时间不能为空')
        return
      }
      this.cur_page = 1;
      this.sosobtn = true;
      if (!this.conditions.agent1) {
        this.conditions.agent1Id = "";
      }
      if (!this.conditions.agent2) {
        this.conditions.agent2Id = "";
      }
      if (!this.conditions.BDname) {
        this.conditions.bdId = "";
      }
      if (!this.conditions.merchantName) {
        if (this.userinfo.rolesId != 5) {
          this.conditions.merchantId = "";
        }
      }
      if (!this.conditions.shopName) {
        this.conditions.shopId = "";
      }
      if (this.conditions.servicelevel == 1) {
        this.orderpage("1");
      } else if (this.conditions.servicelevel == 2) {
        this.orderpage("2");
      } else {
        this.orderpage("2");
      }
    },
    // 一级服务商
    querySearch(queryString, cb) {
      let sosolist = {};
      sosolist = {
        page: 1,
        size: 20,
        type: 1,
        keywords: this.conditions.agent1,
      };
      getservice(sosolist).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.servicearr1 = [];
          for (var i = 0; i < res.data.rows.length; i++) {
            this.servicearr1.push({
              value: res.data.rows[i].agentname,
              id: res.data.rows[i].id,
            });
          }
          let results = queryString
            ? this.servicearr1.filter(this.createFilter(queryString))
            : this.servicearr1;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    // 二级服务商
    querySearch2(queryString, cb) {
      let servicearr = this.servicearr2;
      let sosolist = {};
      sosolist = {
        page: 1,
        size: 20,
        type: 2,
        keywords: this.conditions.agent2,
      };
      getservice(sosolist).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.servicearr2 = [];
          for (var i = 0; i < res.data.rows.length; i++) {
            this.servicearr2.push({
              value: res.data.rows[i].agentname,
              id: res.data.rows[i].id,
            });
          }
          let results = queryString
            ? this.servicearr2.filter(this.createFilter(queryString))
            : this.servicearr2;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },
    // 获取一级服务商
    getservice(val) {
      getservice({
        type: val,
      }).then((res) => {
        console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          for (var i = 0; i < res.data.rows.length; i++) {
            this.servicearr1.push({
              value: res.data.rows[i].agentname,
              id: res.data.rows[i].id,
            });
          }
        }
      });
    },

    // 订单列表
    orderpage(level) {
      let sosolist = {};
      // if(level == 1){
      sosolist = {
        page: this.cur_page,
        size: this.cur_size,
        agent1Id: this.conditions.agent1Id,
        agent2Id: this.conditions.agent2Id,
        startTradeTime: this.date[0],
        finishTradeTime: this.date[1],
        merchantId: this.conditions.merchantId,
        shopId: this.conditions.shopId,
        statistic: this.statistic,
      };
      this.newobj = Object.assign(sosolist, this.conditions);
      // console.log(newobj)
      // }else if(level ==2){
      //   sosolist = {
      //    page: this.cur_page,
      //     size: this.cur_size,
      //     agent2Id: this.conditions.serviceid,
      //     startTime: this.date[0],
      //     finishTime: this.date[1],
      //   }
      //   this.newobj = Object.assign(sosolist,this.conditions)
      //   // console.log(newobj)
      // }
      var day;
      var sdate = new Date(this.date[0]);
      var edate = new Date(this.date[1]);
      day = edate.getTime() - sdate.getTime();
      day = parseInt(day / (1000 * 60 * 60 * 24));
      // console.log(day)
      if (day >= 31) {
        this.$message.error("只能查询一个月内的交易");
        this.sosobtn = false;
      } else {
        this.loading = true;
        // templateOrderList
        templateOrderList(sosolist).then((res) => {
          // console.log(res);
          if (res.code == 405) {
            sessionStorage.removeItem("token");
            this.$router.push("/login");
          } else if (res.code != 200) {
            this.$message.error(res.message);
          } else {
            this.sosobtn = false;
            this.merchantarr = []
            res.data.forEach(item=>{
              item.tradeOrderListVo.outTradeNo = item.outTradeNo
              item.tradeOrderListVo.templateId = item.templateId
              item.tradeOrderListVo.templateName = item.templateName
              this.merchantarr.push(item.tradeOrderListVo)
            })
            // this.merchantarr = res.data;
            this.combined = res.pageInfo.recordCount;
            this.pageCount = res.pageInfo.pageCount;
            this.loading = false;
          }
        });
        // templateStatistics
        templateStatistics(sosolist).then((res) => {
          // console.log(res);
          if (res.code == 405) {
            sessionStorage.removeItem("token");
            this.$router.push("/login");
          } else {
            console.log(res.data)
            this.indentinfo = res.data;
          }
        });
      }
    },
    // 跳详情
    joinindentdetails(val, code) {
      if (code == 2 || code == 3 || code == 4 || code == 6 || code == 8) {
        queryorder({}, val).then((res) => {
          // console.log(res);
          // if(res.code == 405){
          // sessionStorage. removeItem('token')
          //   this.$router.push('/login');
          // }else{
          // }
        });
      }
      // console.log(val)
      this.$router.push({
        path: "/indentdetails",
        query: {
          no: val,
        },
      });
    },
    // 导出
    merchantexcel(){
      this.exxxx = true;
      let i = 0;
      let time = setInterval(() => {
        if (i == 300) {
          loading.close();
          this.$message.error("请求超时");
          clearInterval(time);
        } else {
          i++;
        }
      }, 1000);
      const loading = this.$loading({
        lock: true,
        text: "导出操作可能耗时较长，请耐心等待",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
       let sosolist = {}
        sosolist ={
          page: this.cur_page,
          size: this.cur_size,
          agent1Id: this.conditions.agent1Id,
          agent2Id: this.conditions.agent2Id,
          startTradeTime: this.date[0],
          finishTradeTime: this.date[1],
          merchantId: this.conditions.merchantId,
          shopId: this.conditions.shopId
        }

      Object.assign(
        sosolist,
        this.conditions
      );
      // console.log(sosolist)
      temPexportExcels(sosolist).then((res) => {
        console.log(res);
        if (res.data.code == 405) {
          clearInterval(time);
          sessionStorage.removeItem("token");
          this.$router.push("/login");
          loading.close();
          this.exxxx = false;
        } else if (res.data.code == 200) {
          clearInterval(time);
          this.$message({
            message: "导出成功",
            type: "success",
          });
          let elink = document.createElement("a");
          elink.download = "缴费订单.xls";
          elink.href = res.data.data.replace("http://", "https://");
          elink.click();
          // window.open(, '_blank')
          loading.close();
          this.exxxx = false;
        } else {
          clearInterval(time);
          this.$message.error(res.data.message);
          loading.close();
          this.exxxx = false;
        }
      });
    },
    // 退款box
    refund(money, id) {
      this.dingdanid = id;
      this.visible = true;
      this.password.money = money;
      this.password.psd = "";
    },
    // 确定退款
    refundok() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      refundorder(
        {
          refund_fee: (this.password.money * 100).toFixed(),
          servicePassword: md5(this.password.psd),
        },
        this.dingdanid
      ).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          loading.close();
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.$message({
            message: "退款成功",
            type: "success",
          });
          loading.close();
          this.visible = false;
          this.orderpage("1");
        } else {
          loading.close();
          this.$message.error(res.message);
        }
      });
    },
    // 监听支付状态
    payStatusfun(val) {
      let _this = this;
      console.log(val);
      if (val) {
        _this.statistic = "";
      } else {
        _this.statistic = "123";
      }
    },
    // 跳转导出
    joinexportlist(){
      this.$router.push({
        path: '/exportlist',
        query: {
          type: 'indent',
          exportType: 1,
        }
      })
    }
  }
};
</script>
<style scoped lang="less">
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicename {
  width: 60%;
}
.servicelevel {
  width: 20%;
}
.width20 {
  width: 20%;
}
.width30 {
  width: 30%;
}
.red {
  color: #f9607d;
}
.stitle {
  padding: 5px 0;
  font-size: 18px;
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #00152a;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
}
.statistical > .statisticalitem {
  text-align: center;
  line-height: 200%;
}
.BDname {
  width: 20%;
}
.width60 {
  width: 40%;
}
.yuan {
  color: #c1c5cb;
  font-size: 12px;
  position: relative;
  left: -20px;
}
.green {
  background: #97c05c;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.orange {
  background: #f29c38;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.hui {
  background: #888888;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.reds {
  background: #d3362f;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.blue {
  background: #4154af !important;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.cyan {
  background: rgba(1, 255, 255) !important;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.yellow {
  background: #ffe793 !important;
  color: #000;
  padding: 0 5px;
  border-radius: 10px;
}
.notice-tip {
  color: red;
  font-size: 8px;
  text-align: center;
}
.el-divider--horizontal {
  margin: 0;
  margin-top: -20px;
  margin-bottom: 15px;
}
/deep/.el-input--small .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.diver2th {
  margin-top: 15px;
}
.elForm {
  margin-left: 25px;
}
/deep/.dateTime .el-input--small .el-input__inner {
  width: 281px;
}
</style>